<template>
    <div class="edit-popup">
        <popup
            ref="popupRef"
            title="绑定账号"
            :async="true"
            width="750px"
            @confirm="handleSubmit"
            @close="handleSubmit"
        >
            <el-card class="!border-none" v-loading="pager.loading" shadow="never">

                 <!-- 搜索和刷新区域 -->
                 <div class="flex items-center mb-4">
                    <el-input
                        v-model="queryParams.code"
                        placeholder="请输入微信号"
                        clearable
                        class="w-[220px] mr-2"
                        @keyup.enter="handleSearch"
                    />
                    <el-button type="primary" @click="handleSearch">搜索</el-button>
                    <!-- <el-button class="ml-2" @click="handleRefresh">刷新</el-button> -->
                    <el-button class="ml-2" @click="handleReset">重置</el-button>
                </div>

                <div class="mt-4" style="height: 300px; overflow: auto;">
                    <el-table :data="pager.lists">
                         <!--
                            max-height 设置为略小于外层高度，避免分页等内容被遮挡
                            你可以根据实际需求调整高度数值
                        -->
                        <el-table-column label="微信账号" prop="code" show-overflow-tooltip />
                        <el-table-column label="绑定时间" prop="create_time" show-overflow-tooltip />
                    </el-table>
                </div>
                <div class="flex mt-4 justify-end">
                    <pagination v-model="pager" @change="getLists" />
                </div>
            </el-card>
        </popup>
    </div>
</template>

<script lang="ts" setup  name="tencentAdvertisingWechatList" >
import type { FormInstance } from 'element-plus'
import Popup from '@/components/popup/index.vue'
import { ElInput } from 'element-plus'
import { usePaging } from '@/hooks/usePaging'
import {
    apiTencentAdvertisingWechatListLists,
} from '@/api/tencent_advertising_wechat_list'

const popupRef = shallowRef<InstanceType<typeof Popup>>()
const emit = defineEmits(['success','close'])
const mode = ref('wechat_list')


const props = defineProps({
    account_id: {
        type: String,
        default: ''
    }
})

// 查询条件
const queryParams = reactive({
    account_id:props.account_id,
     code: ''
})

// 分页相关
const { pager, getLists, resetPage, resetParams } = usePaging({
    fetchFun: apiTencentAdvertisingWechatListLists,
    params: queryParams
})

const handleSubmit = async () => {
    popupRef.value?.close()
    emit('success')
}

/**
 * 搜索微信号
 * 触发时自动带上 code 字段请求接口
 */
 const handleSearch = () => {
    resetPage() // 重置到第一页并刷新
}

/**
 * 刷新列表
 * 重新请求接口，保留当前搜索条件
 */
 const handleRefresh = () => {
    getLists()
}
onActivated(() => {
    queryParams.account_id=props.account_id
    getLists()
})
/**
 * 重置搜索条件
 * 清空 code 字段并重置分页，自动刷新列表
 */
 const handleReset = () => {
    queryParams.code = ''
    resetPage()
}

onMounted(() => {
    queryParams.account_id=props.account_id
    getLists()
})
const open = (type = 'wechat_list') => {
    mode.value = type
    popupRef.value?.open()
}
defineExpose({
    open,
})
</script>
